<template>
  <page-header-wrapper>
    <a-card>
      <a-form>
        <a-form-item>
          <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
          <a-button style="margin-left:20px;" type="primary" @click="search">查询</a-button>
        </a-form-item>
      </a-form>
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :scroll="{ x: 1600, y: 400 }"
        @change="sorterFun"
      >
        <span slot="firstLoanDate" slot-scope="firstLoanDate"> {{ humanizeDate(firstLoanDate) }}</span>
        <span slot="totalLoan" slot-scope="totalLoan"> {{ moneyType(totalLoan) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="firstLoanMaxNum" slot-scope="firstLoanMaxNum"> {{ moneyType(firstLoanMaxNum) }}</span>
        <span slot="asseApprove" slot-scope="_, record">
          <apprDialog :record="record"></apprDialog>
        </span>
        <span slot="history" slot-scope="_, record">
          <ListHistory :record="record" />
        </span>
        <span slot="approval" slot-scope="_, record">
          <submitApply :record="record" @update="getData(current)" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)" v-action:get>查看</a>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getProject } from '@/api/common'
import moment from 'moment'
const columns = [
  {
    title: '项目编号',
    dataIndex: 'projectNum',
    key: 'projectNum',
    width: 130,
    fixed: 'left'
  },
  {
    title: '项目地址',
    dataIndex: 'addr',
    key: 'addr',
    width: 110,
    fixed: 'left',
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName',
    width: 110,
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '贷款顾问',
    dataIndex: 'sysUserName',
    key: 'sysUserName',
    width: 110,
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '总贷款额度',
    dataIndex: 'totalLoan',
    key: 'totalLoan',
    width: 110,
    scopedSlots: { customRender: 'totalLoan' }
  },
  {
    title: '实际贷款本金金额',
    dataIndex: 'principal',
    key: 'principal',
    width: 150,
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '审批首次最大放款金额',
    dataIndex: 'firstLoanMaxNum',
    key: 'firstLoanMaxNum',
    scopedSlots: { customRender: 'firstLoanMaxNum' }
  },
  {
    title: '最晚首次放款时间',
    dataIndex: 'firstLoanDate',
    key: 'firstLoanDate',
    scopedSlots: { customRender: 'firstLoanDate' }
  },
  {
    title: 'LVR（%）',
    dataIndex: 'LVR',
    key: 'LVR',
    width: 100
  },
  {
    title: 'IRR（%）',
    dataIndex: 'IRR',
    key: 'IRR',
    width: 100
  },
  {
    title: '审批状态',
    dataIndex: 'asseApprove',
    key: 'asseApprove',
    width: 110,
    scopedSlots: { customRender: 'asseApprove' },
    filters: [
      {
        text: '待审批',
        value: 1
      },
      {
        text: '批准',
        value: 2
      },
      {
        text: '拒绝',
        value: 3
      },
      {
        text: '待提交',
        value: 4
      },
      {
        text: '待查阅',
        value: 5
      }
    ],
    filterMultiple: false
    // onFilter: (value, record) => record.asseApprove == value
  },
  {
    title: '历史记录',
    dataIndex: 'history',
    key: 'history',
    width: 90,
    fixed: 'right',
    scopedSlots: { customRender: 'history' }
  },
  {
    title: '审批',
    dataIndex: 'approval',
    key: 'approval',
    width: 90,
    fixed: 'right',
    scopedSlots: { customRender: 'approval' }
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'operation',
  //   scopedSlots: { customRender: 'operation' }
  // }
]
export default {
  name: 'Project',
  components: {
    apprDialog: () => import('../com/apprDialog.vue'),
    ListHistory: () => import('../com/ListHistory.vue'),
    submitApply: () => import('../com/submitApply.vue')
  },
  data() {
    return {
      data: [],
      keyWord: '',
      columnKey: '',
      asseApprove: '',
      current: 1,
      pagination: {
        total: 1,
        pageSize: 10
        // onChange: this.getData
      },
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'clientName', value: 2 },
        { text: 'sysUserName', value: 3 }
      ]
    }
  },
  computed: {
    columns() {
      if (this.$auth('evalProject.update') || this.$auth('evalProject.delete')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            width: 100,
            fixed: 'right',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    search() {
      this.getData()
    },
    toDetail(record) {
      this.$router.push({ name: 'evaluation/brief', query: { id: record.id, Archive: record.Archive } })
    },
    submitApply(record) {
      this.$router.push({ name: 'evaluation/submitApply', query: { id: record.id } })
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    sorterFun(pagination, filters, sorter) {
      // console.log(filters)
      this.asseApprove = filters?.asseApprove?.[0] ? filters?.asseApprove?.[0] : ''
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData(pagination.current)
    },
    async getData(page = 1) {
      this.current = page
      var _form = {
        page,
        limit: this.pagination.pageSize,
        dataType: 2,
        approve: 2
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      if (this.columnKey) {
        _form.orderType = this.columnKey
      }
      if (this.asseApprove) {
        _form.asseApprove = this.asseApprove
      }
      const res = await getProject(_form)
      const data = res.result.data
      this.pagination.total = data.total
      const _data = data.list
      // data.list.forEach(el => {
      //   if (el.approve == 2) _data.push(el)
      // })
      _data.forEach(el => {
        el.totalLoan = el.loanData.totalLoan
        el.principal = el.loanData.principal
        el.firstLoanMaxNum = el.loanData.firstLoanMaxNum
        el.firstLoanDate = el.loanData.firstLoanDate
        el.LVR = el.loanData.LVR
        el.IRR = el.loanData.IRR
      })
      this.data = _data
    }
  }
}
</script>
<style scoped>
.body {
  width: 100%;
  height: 100vh;
  margin: 10px;
  padding: 15px;
  background: #ffffff;
}
</style>
